<!DOCTYPE html>
<html>

<head>
<th:block th:replace="/fragments/head" />
</head>

<body class="sb-l-o">
	<!--/* 主题设置面板 */-->
	<div th:replace="/fragments/skin-toolbox"></div>

	<!-- BEGIN: 主页面 -->
	<div id="main">
		<!--/* 顶部导航 */-->
		<header th:replace="/fragments/header-banner"></header>
		<!--/* 左侧功能菜单导航 */-->
		<aside th:replace="/fragments/aside"></aside>
		<!-- BEGIN: Content-Wrapper -->
		<section id="content_wrapper">
			<!--/* 模块路径导航条 */-->
			<header th:replace="/fragments/header-breadcrumb"></header>

			<!-- Begin: 业务办理区 -->
			<section id="content" class="animated fadeIn">

				<!-- Input Fields -->
				<div class="panel">
					<form id="fo-query" class="form-horizontal">
						<div class="panel-heading">
							<span class="panel-title">查询条件</span>
						</div>
						<div class="panel-body">
							<div class="form-group">
								<label class="col-md-1 control-label">枚举名称：</label>
								<div class="col-md-2">
									<input name="enum_name" class="form-control" />
								</div>
								<label class="col-md-1 control-label">枚举键：</label>
								<div class="col-md-2">
									<input name="enum_key" class="form-control" />
								</div>
								<label class="col-md-1 control-label">是否启用</label>
								<div class="col-md-2">
									<select name="is_enable" class="basic-single form-control">
										<option></option>
										<option value="1">是</option>
										<option value="0">否</option>
									</select>
								</div>
								<label class="col-md-1 control-label">所属系统：</label>
								<div class="col-md-2">
									<select name="sys_key" class="basic-single form-control">
										<option></option>
										<option value="0">缺省全局</option>
									</select>
								</div>
							</div>
						</div>
						<div class="panel-footer text-center">
							<button id="btn-query" class="btn btn-default btn-gradient btn-sm" type="button">
								<span class="glyphicon glyphicon-search mr3"></span>查询
							</button>
							<button class="btn btn-default btn-gradient btn-sm" type="reset">
								<span class="glyphicon glyphicon-repeat mr3"></span>重置
							</button>
						</div>
					</form>

				</div>

				<div class="row">
					<div class="col-md-12">
						<div class="panel panel-visible" id="spy1">
							<div class="panel-heading">
								<span class="panel-title">枚举参数列表</span>
								<div class="widget-menu pull-right mr5">
									<div class="btn-group">
										<button id="btn-new" class="btn btn-default btn-gradient btn-sm">
											<span class="fa fa-plus mr3"></span>新增
										</button>
										<button id="btn-edit" class="btn btn-default btn-gradient btn-sm">
											<span class="fa fa-pencil mr3"></span>修改
										</button>
										<button id="btn-del" class="btn btn-default btn-gradient btn-sm">
											<span class="fa fa-times mr3"></span>删除
										</button>
									</div>
								</div>
							</div>
							<div class="panel-body pn">
								<table id="dt-enums" class="table my table-striped table-hover ">
									<thead>
										<tr>
											<th>编号</th>
											<th>枚举键</th>
											<th>枚举名称</th>
											<th>元素键</th>
											<th>元素值</th>
											<th>所属系统</th>
											<th>是否启用</th>
											<th>更新时间</th>
											<th class="text-center">操作</th>
										</tr>
									</thead>
									<tbody>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>

				<!-- 新增参数窗口 -->
				<div class="modal fade" id="w-new" tabindex="-1" data-backdrop="static">
					<div class="modal-dialog w450">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
								<h3 class="modal-title">新增键值参数</h3>
							</div>
							<div class="modal-body">
								<form id="fo-new" class="form-horizontal">
									<div class="form-group">
										<label class="col-md-3 control-label required">所属系统：</label>
										<div class="col-md-9 field">
											<select name="sys_key" class="basic-single form-control" style="width: 250px">
												<option value="0">缺省全局</option>
											</select>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label required">参数名称：</label>
										<div class="col-md-9 field">
											<input type="text" name="name" class="form-control" />
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label required">参数键：</label>
										<div class="col-md-9 field">
											<input class="form-control" type="text" name="param_key" />
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label required">参数值：</label>
										<div class="col-md-9 field">
											<input name="value" class="form-control" type="text" />
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">备注</label>
										<div class="col-md-9 field">
											<textarea name="remark" class="form-control textarea-grow" rows="4"></textarea>
										</div>
									</div>
								</form>
							</div>
							<div class="modal-footer">
								<button type="submit" form="fo-new" class="btn btn-sm btn-success btn-gradient">保存</button>
								<button type="button" class="btn btn-sm btn-danger btn-gradient" data-dismiss="modal">关闭</button>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
					<!-- /.modal-dialog -->
				</div>
				<!-- /.modal -->


			</section>
			<!-- End: 业务办理区 -->

			<!--/* 页脚 */-->
			<footer th:replace="/fragments/footer"></footer>

		</section>
		<!-- End: Content-Wrapper -->

	</div>
	<!-- End: 主页面 -->

	<!--/* 公共脚本文件 */-->
	<th:block th:include="/fragments/scripts" />

	<script th:inline="javascript">
		/*<![CDATA[*/
		jQuery(document)
				.ready(
						function() {
							"use strict";
							Core.init();
							/******* 事件监听.start ********/
							$("#btn-query").on("click", fnQuery);
							$('#dt-enums').on('init.dt', fnQuery);
							$("#btn-new").on("click", function(e) {
								$('#w-new').modal();
								$("#fo-new")[0].reset();
							});
							$("#btn-edit").on("click", function(e) {
								My.notify('修改功能正在完善中...', 'info');
							});
							$("#btn-del").on("click", function(e) {
								My.notify('批量删除功能正在完善中...', 'info');
							});
							/******* 事件监听.end ********/

							//初始化下拉框
							$(".basic-single").select2({
								placeholder : "请选择...",
								width : '100%',
								minimumResultsForSearch : -1, //隐藏搜索框
								allowClear : true
							});

							//初始化表格
							$('#dt-enums')
									.dataTable(
											{
												dom : 'tr<"dt-panelfooter clearfix"lip>',
												pageLength : 20,
												lengthMenu : [ [ 10, 20, 50, 200, 500 ], [ 10, 20, 50, 200, 500 ] ],
												ordering : false,
												processing : true,
												serverSide : true, //false：一次查询，客户端分页的模式；true：服务端分页模式
												deferLoading : 0, //屏蔽初始化后自动加载数据
												pagingType : "full_numbers",
												columns : [ {
													data : "id",
													width : 60
												}, {
													data : "enum_key",
													width : 150
												}, {
													data : "enum_name",
													width : 200
												},{
													data : "element_key",
													width : 150
												},{
													data : "element_value",
													width : 400
												}, {
													data : "sys_key",
													width : 200
												}, {
													data : "is_enable",
													width : 100
												},{
													data : "update_time",
													width : 160
												} ],
												columnDefs : [ {
													targets : [ 8 ],//动作列
													width : 50,
													data : {},
													render : function(row, type, full) {
														var html = "<div class='text-center'><button class='btn btn-danger btn-xs btn-gradient' onclick='fnDelete("
															+ JSON.stringify(row) 
															+ ")'>删除</button></div>";
													    return html;
													}
												} ],
											});

							//表单校验规则
							var validateOptions = {
								//校验规则
								rules : {
									name : {
										required : true
									},
									param_key : {
										required : true
									},
									sys_key : {
										required : true
									},
									value : {
										required : true
									}
								},
								//提示信息
								messages : {
									name : {
										required : '请输入参数名称'
									},
									param_key : {
										required : '请输入参数键'
									},
									sys_key : {
										required : '请选择所属系统'
									},
									value : {
										required : '请输入参数值'
									}
								}
							}

							//绑定新增表单校验和提交响应事件
							My.validate('#fo-new', fnNew, validateOptions);

						});

		//查询列表
		function fnQuery() {
			var ajax = {
				url : "list",
				type : "POST",
				data : My.params('#fo-query')
			}
			$('#dt-enums').DataTable().settings()[0].ajax = ajax;
			$('#dt-enums').DataTable().ajax.reload();
		}

		//保存
		function fnNew() {
			$.ajax({
				type : 'post',
				url : 'save',
				data : My.params('#fo-new'),
				success : function(data) {
					if (data.code == '1') {
						My.notify(data.msg);
						$('#w-new').modal('hide');
						fnQuery();
					} else {
						My.notify(data.msg, 'danger');
					}
				}
			});
		}

		//删除
		function fnDelete(row) {
			My.confirm('确认删除当前枚举元素吗？', function(result) {
				if (result) {
					$.ajax({
						type : 'post',
						url : 'delete',
						data : row,
						success : function(data) {
							My.notify(data.msg);
							fnQuery();
						}
					});
				}
			});
		}

		/*]]>*/
	</script>

</body>

</html>
